<template>
	<view>
		<view class="carousel">
			<swiper circular="true" autoplay="true" duration="400" :indicator-dots="true"
				indicator-active-color="#e80909">
				<swiper-item class="swiper-item" v-for="item in info.pics">
					<view class="image-wrapper">
						<image lazy-load :src="item" class="loaded" mode="widthFix"
							style="width: 750rpx;height: 600rpx;" />
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="margin">
			<view class="title">
				{{info.name}}
			</view>
		</view>

		<!-- 配送服务 -->
		<view class="margin fs28">
			<view class="d-flex fs28">
				<view class="mt-2 ml-2  gray">店主</view>
				<view class="ml-2 mt-2 bor">{{info.owner}}</view>
			</view>
			<view class="d-flex">
				<view class="mt-2 ml-2 gray">联系方式</view>
				<view class="ml-2 mt-2">{{info.mobile}}</view>
			</view>
			<view class="d-flex" style="margin-bottom: 20rpx;">
				<view class="mt-2 ml-2 gray mb-1">简介</view>
				<view class="ml-2 mt-2">{{info.introduce}}</view>
			</view>
		</view>
		<!-- 商品详情 -->
		<view class="margin ">
			<view class="" v-if="info.content" style="padding: 10rpx;">
				<u-parse :content="info.content"></u-parse>
			</view>
		</view>

		<view @tap="goContact(info.id)"
			style="width: 94%;height: 40px;margin-left: 3%;background-color: crimson;border-radius: 10px;display: flex;align-items: center;justify-content: center;color: #fff;margin-top:20px;letter-spacing: 3px;">
			联系商家
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				id: 0,
				info: {},
			}
		},
		onLoad(options) {
			this.id = options.id
			this.detail()
		},
		computed: {
			...mapState(['hasLogin']),
		},
		methods: {
			...mapMutations(['login', 'logout']),

			// 详情
			async detail() {
				let ret = await this.$myRequest({
					url: '/business_detail',
					data: {
						id: this.id
					}
				})

				this.info = ret.data.data
				// console.log(this.info)
			},

			goContact(id) {
				uni.navigateTo({
					url: '/pages/business/contact?id=' + id
				})
			}
		},
	}
</script>
<style>
	page {
		background-color: #f3f3f3;
	}
</style>
<style lang="scss">
	.btns {
		background-color: white;
	}

	.collects {
		width: 100rpx;
		height: 100rpx;
		text-align: center;
	}

	.share-class {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 300;
	}

	.share-content {
		position: fixed;
		bottom: 0px;
		width: 100%;
		background: #fff;
	}

	.b {
		border-bottom: 2rpx solid #eaeaea;
		padding-bottom: 20rpx;

	}

	._popup,
	._mask {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
	}

	._popup {
		z-index: 300;
		display: none;
	}

	._mask {
		z-index: 199;
		background: rgba(0, 0, 0, 0.5);
	}

	._popup ._body {
		position: fixed;
		bottom: -800rpx;
		width: 100%;
		height: 800rpx;
		z-index: 200;
		border-radius: 20rpx 20rpx 0 0;
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
	}

	._popup1 ._body1 {
		bottom: -510rpx;
		height: 510rpx;
	}

	._popup.show {
		display: block;
	}

	.show ._mask {
		animation: showPopupMask 0.2S linear both;
	}

	.show ._body {
		animation: showPopupBody 0.2S linear both;
	}

	._popup.hide {
		display: block;
	}

	.hide ._mask {
		animation: hidePopupMask 0.2S linear both;
	}

	.hide ._body {
		animation: hidePopupBody 0.2S linear both;
	}

	@keyframes showPopupBody {
		0% {
			transform: translateY(0);
		}

		100% {
			transform: translateY(-100%);
		}
	}

	@keyframes hidePopupBody {
		0% {
			opacity: translateY(-100%);
		}

		100% {
			opacity: translateY(0);
		}
	}

	@keyframes showPopupMask {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes hidePopupMask {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	._popup.none {
		display: none;
	}

	.hover {
		opacity: 0.6;

	}

	.carousel {
		height: 600upx;
		position: relative;
		background-color: white;
		margin-bottom: 20rpx;

		swiper {
			height: 100%;
		}

		.image-wrapper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 600upx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				margin: 10rpx auto;
			}
		}
	}

	.margin {
		width: 94%;
		margin: 0 auto;
		height: 100%;
		background-color: white;
		border-radius: 20rpx;
		height: 100%;

		.title {
			margin: 30rpx 20rpx 20rpx 20rpx;
			padding: 20rpx 0;
			letter-spacing: 3rpx;
			// font-size: 28rpx;
			margin-top: 20rpx;
		}

		.price {
			color: #e80909;
			font-size: 28rpx;
			letter-spacing: 3rpx;
			margin-left: 20rpx;
			margin-bottom: 10rpx;
		}

		.Sold {
			margin-right: 20rpx;
			color: #999;
			letter-spacing: 3rpx;
			font-size: 26rpx;
		}
	}

	.hover {
		opacity: 0.6;
	}

	.btn1 {
		border-radius: 50rpx;
		margin: 0 20rpx;
		letter-spacing: 2rpx;
		background-color: #f5f5f5;
		margin-top: 40rpx;
	}

	.search {
		text-align: center;
		margin: 35rpx 0;
	}

	.vx {
		width: 235rpx;
		margin: 40rpx auto;
		text-align: center;

	}

	.bb {
		border-bottom: 1px solid #f5f5f5;
	}

	.btn4 {
		// background-color: #e80909;
		color: white;
		margin-left: 100rpx;
	}

	.btn3 {
		background-image: linear-gradient(90deg, rgba(255, 255, 255, 1.0) 230rpx, rgba(199, 9, 8, 1.0)10rpx);
		min-width: 100rpx;
		border: 1rpx solid #e80909;
		border-radius: 50rpx;
		padding: 10rpx 50rpx;
		font-size: 28rpx;
		margin-right: 30rpx;
		height: 50rpx;
		line-height: 50rpx;
	}

	.action-section {
		height: 110upx;
		justify-content: space-between;
		width: 100%;
		position: fixed;
		bottom: 0;
		/* #ifdef H5 */
		// bottom: 100upx;
		/* #endif */
		position: fixed;
		/* bottom: 30upx; */
		z-index: 95;
		display: flex;
		align-items: center;
		height: 100upx;
		// padding: 0 38upx 0 40upx;
		background: #FFFFFF;
	}

	.btn {
		background-color: #d10807;
		color: white;
		border-radius: 80upx;
		height: 80upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30upx;
		letter-spacing: 2upx;
		width: 50%;
	}

	.Quantity {
		border: 2rpx solid #eaeaea;

		height: 60rpx;
		width: 180rpx;
		line-height: 50rpx;

		border-radius: 10rpx;
		margin-top: 20rpx;

		.jian,
		.jia {
			padding: 0 20rpx;
		}

		.one {
			margin: 0 20rpx;
		}

		.jian {
			border-right: 2rpx solid #eaeaea;
			// margin-top: -5rpx;
		}

		.jia {
			border-left: 2rpx solid #eaeaea;
			// margin-top: -5rpx;
		}
	}

	.one {}

	.popup-ml {
		color: #333;
		border: 1px solid #bdbdbd;
		padding: 10rpx 20rpx;
		width: 180rpx;
		border-radius: 10rpx;
		float: left;
		// justify-content: space-around;
		margin-left: 30upx;
		margin-top: 10rpx;
		text-align: center;
	}

	.active {
		background-color: #d10807;
		color: white;
		border: none;
	}

	.popup-title {
		color: #d2090a;
		// font-size: 28rpx;
		margin: 20rpx 0 40rpx 10rpx;
		letter-spacing: 2rpx;
	}

	.popup-price {
		margin: 10rpx 0 0 10rpx;
		color: #d30905;
	}

	.clear {
		clear: both;
	}

	.list {
		// margin: 0 0 0 20rpx;
		// width: 150rpx;
		// height: 150rpx;
		// border: 2rpx solid #bdbdbd;
		// margin-top: 30rpx;
		// border-radius: 20rpx;

		.list-image {
			width: 135rpx;
			height: 160rpx;
			margin: 10rpx;
		}
	}
</style>